<template>
  <div class="login" :style="winSize">
    <div class="form">
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm2.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
          <el-button @click="resetForm('ruleForm2')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      let checkName = (rule, value, cb) => {
        if (!value) {
          return cb(new Error('用户名不能为空'))
        }
        cb()
      }
      let validatePass = (rule, value, cb) => {
        if (value === '') {
          cb(new Error('请输入密码'))
        }
        cb()
      }
      return {
        winSize: {
          width: '',
          height: ''
        },
        ruleForm2: {
          pass: '',
          name: ''
        },
        rules2: {
          name: [
            { validator: checkName, trigger: 'blur' }
          ],
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      setSize () {
        this.winSize.width = window.innerWidth + 'px'
        this.winSize.height = window.innerHeight + 'px'
      },
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$router.push({path: '/home'})
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      }
    },
    created () {
      this.setSize()
      window.onresize = () => {
        this.setSize()
      }
    }
  }
</script>

<style lang='less'>
  @width: 320px;
  .login{
    width: 100%;
    height: 100%;
    background: url('https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture') no-repeat center center;
    background-size: cover;
  }
  .form{
    width: @width;
    height: auto;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -180px;
    margin-top: -140px;
    background: rgba(255, 255, 255, .5);
    padding: 20px 40px 0 0;
    border-radius: 6px;
  }
</style>
